<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
      circle {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      const data = [
        { date: "2010", avg: 581 },
        { date: "2011", avg: 512 },
        { date: "2012", avg: 493 },
        { date: "2013", avg: 566 },
        { date: "2014", avg: 589 },
        { date: "2015", avg: 601 },
        { date: "2016", avg: 575 },
        { date: "2017", avg: 523 },
        { date: "2018", avg: 476 },
        { date: "2019", avg: 503 },
        { date: "2020", avg: 625 },
        { date: "2021", avg: 584 },
        { date: "2022", avg: 539 },
        { date: "2023", avg: 535 },
      ];

      const width = 800 ;
      const height = 600 ;
      const margin = 100 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      
      const angleScale = d3.scaleTime()
        .domain(d3.extent(data,d=>new Date(d.date)))
        .range([0 , Math.PI * 2 ])  

      const raduisScale = d3.scaleLinear()
        .domain(d3.extent(data,d=>d.avg))  
        .range([150,200])
        

      const lr = d3.lineRadial()
        .angle( d=>angleScale(new Date(d.date)) )
        .radius( d=>raduisScale(d.avg) )
        .curve( d3.curveNatural)
        
      const d = lr(data)  ;

      const g = svg.append('g').attr('transform',`translate(${width/2},${height/2})`)
      
      g.append('path')
        .attr('d',d)
        .attr('fill','none')
        .attr('stroke','#666')



      //绘制每一个点
      g.selectAll('circle')
        .data(data)
        .join('circle')
        .attr('cx', d=>{
          const r = raduisScale(d.avg)
          const angle = angleScale(new Date(d.date));
          return r * Math.sin(angle) ;
        })
        .attr('cy',d=>{
          const r = raduisScale(d.avg)
          const angle = angleScale(new Date(d.date));
          return - r * Math.cos(angle)
        })
        .attr('r',4)
        .attr('fill','steelblue')

    </script>
  </body>
</html>
